<template>
    <div class="register-container">
      <h2>用户注册</h2>
      <form @submit.prevent="handleRegister">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" v-model="formData.username" id="username" required>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" v-model="formData.password" id="password" required>
        </div>
        <div class="form-group">
          <label for="phone">手机号</label>
          <input type="text" v-model="formData.phone" id="phone" required>
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" v-model="formData.email" id="email">
        </div>
        <button type="submit" class="btn btn-primary">注册</button>
        <p v-if="errorMessage" class="text-danger">{{ errorMessage }}</p>
        <p v-if="successMessage" class="text-success">{{ successMessage }}</p>
      </form>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        formData: {
          username: '',
          password: '',
          phone: '',
          email: ''
        },
        errorMessage: '',
        successMessage: ''
      };
    },
    methods: {
      handleRegister() {
        axios.post('/api/register', this.formData) // 假设后端注册接口是 /api/register
       .then(response => {
            this.successMessage = '注册成功，请登录';
            // 可以根据情况做一些页面跳转或其他提示操作
          })
       .catch(error => {
            this.errorMessage = '注册失败，请检查填写信息';
          });
      }
    }
  };
  </script>
  
  <style scoped>
  .register-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  </style>